<template>
  <el-col span="4" style="min-width: 160px;display:flex;justify-content:flex-end">
    <el-tooltip class="item" effect="dark" content="展开全部" placement="top">
      <el-button :class="upIcon" class="search-circle" @click="unfoldIcon" style="margin-right: 10px"></el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="清空" placement="top">
      <el-button :class="emptyIcon" class="search-circle" @click="emptyForm"></el-button>
    </el-tooltip>
    <el-tooltip class="item" effect="dark" content="搜索" placement="top">
      <el-button type="primary" icon="el-icon-search" size="small" @click="searchForm" style="margin-right: 0">搜索
      </el-button>
    </el-tooltip>
  </el-col>
</template>
<script>
export default {
  name: "search-button",
  data() {
    return {
      upIcon: 'el-icon-arrow-down',
      searchIcon: 'el-icon-search',
      emptyIcon: 'el-icon-delete',
    }
  },
  props:{
    /**
     * 搜索框折叠
     */
    searchConceal:{
      type:Boolean,
    },
    /**
     * 重置搜索框
     */
    resetSearch:{
      type:Function,
    },
    /**
     * 搜索方法
     */
    search:{
      type:Function,
    }
  },
  methods: {
    unfoldIcon() {
      if (this.upIcon === 'el-icon-arrow-down') {
        this.upIcon = 'el-icon-arrow-up'
        this.$emit('update:searchConceal',true)
      } else {
        this.upIcon = 'el-icon-arrow-down'
        this.$emit('update:searchConceal',false)
      }
    },
    emptyForm() {
      this.resetSearch();
    },
    searchForm() {
      this.search();
    }
  }
}
</script>

<style scoped>

</style>
